<template>
    <el-container>
        <el-main class="wrapper">
            <section class="panel cms-content">
                <div class="panel-body">
                    <el-row :gutter="20">
                        <el-col :span="10">
                            <div class="grid-content bg-purple">
                                <el-form :model="form" size="medium" :status-icon="true" ref="form"
                                         label-position="top" label-width="100px" class="demo-ruleForm" style="margin-top: 25px">
                                    <el-form-item  label="菜单名称：" prop="title">
                                        <el-input v-model="form.title" placeholder="请填写菜单名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="菜单动作：" prop="action">
                                        <el-radio-group v-model="form.action">
                                            <el-radio label="1">链接</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="" prop="value">
                                        <el-input v-model="form.value" placeholder="有子菜单请不填此项"></el-input>
                                    </el-form-item>
                                    <el-form-item label="">
                                        <p>注意: 指定点击此菜单时要跳转的链接（注：链接需加http://或者https://）</p>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-col>
                        <el-col :span="14">
                            <div class="grid-content bg-purple phone">
                                <div class="phone-contnet">
                                    <div class="phone-contnet-title"></div>
                                    <div class="phone-menu">
                                        <ul>
                                            <li v-for="(menu,index) in menus"
                                                :key="index"
                                                :class="[{ 'li-two': menus.length==2, 'li-three': menus.length==3 }]">
                                                <span @click="editMenuInfo(index)">{{ menu.title }}</span>
                                                <i v-if="index>0" @click="closeMenu(index)" class="menu-close"></i>
                                                <div class="phone-menu-childs">
                                                    <div class="childs-item">
                                                        <p v-for="(c,i) in menu.child" :key="i">
                                                            <span @click="editMenuChildInfo(index,i)">{{ c.title }}</span> <i @click="closeMenuChild(index,i)" class="menu-child-close"></i>
                                                        </p>
                                                        <p v-if="menu.child.length < 5" class="childs-add" @click="pushMenuChild(index)"><i class="fa fa-plus"></i></p>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <span v-if="menus.length < 3" class="add-menu" @click="pushMenu"><i class="fa fa-plus"></i> 菜单</span>
                            </div>
                        </el-col>
                    </el-row>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="update()">保 存</el-button>
                    </span>
                </div>
            </section>
        </el-main>
    </el-container>
</template>

<script>
    import {MenuInfo,MenuUpdate} from '@/utils/request';
    export default {
        data() {
            return {
                menus: [],
                keywords: [],
                form: {title:'菜单名称',action:'1',value:'',child:[]},
            }
        },
        activated() {
            this.info()
        },
        methods: {
            editMenuInfo(index){
                this.form = this.menus[index];
            },
            editMenuChildInfo(index,i){
                this.form = this.menus[index].child[i];
            },
            pushMenu(){
                this.menus.push({title:'菜单名称',action:'1',value:'',child:[]});
            },
            closeMenu(index){
                this.menus.splice(index,1);
            },
            pushMenuChild(index){
                this.menus[index].child.push({title:'子菜单名称',action:'1',value:''});
            },
            closeMenuChild(index,i){
                this.menus[index].child.splice(i,1);
            },
            info() {
                MenuInfo().then((res) => {
                    if(res.code){
                        this.$message.error(res.msg);
                    }else{
                        if(res.data && res.data.menu && res.data.menu.length){
                            this.form = res.data.menu[0];
                            this.menus = res.data.menu;
                        }else{
                            this.form = {title:'菜单名称',action:'1',value:'',child:[]};
                            this.menus = [];
                            this.menus.push(this.form);
                        }
                    }
                })
            },
            update() {
                MenuUpdate({'menu':this.menus}).then((res) => {
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.$message({
                            type: 'success',
                            duration: '1000',
                            message: res.msg,
                        });
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>
